<template>
  <div class="article-page">
    <van-search
      v-model="value"
      show-action
      label="上海 ｜"
      background="#4fc08d"
      placeholder="请输入搜索关键词"
      @search="onSearch"
    >
      <template #action>
        <van-icon class="mapicont" name="location-o" />
      </template>
    </van-search>
    <!-- 区域 -->
    <van-dropdown-menu>
      <van-dropdown-item>
        <van-picker :columns="columns1" />
      </van-dropdown-item>
      <!-- 方式 -->
      <van-dropdown-item>
        <van-picker :columns="columns2" />
      </van-dropdown-item>
      <!-- 租金 -->
      <van-dropdown-item>
        <van-picker :columns="columns3" />
      </van-dropdown-item>
      <!-- 筛选 -->
      <van-dropdown-item />
      <van-cell is-link @click="showPopup">展示弹出层</van-cell>
      <van-popup v-model="show" position="right" :style="{ weight: '30%' }"
        ><div class="FilterMore_tags__10C1X">
          <dl class="FilterMore_dl__1WLj8">
            <dt class="FilterMore_dt__2LHNy">户型</dt>
            <dd class="FilterMore_dd__3GkeI">
              <span class="FilterMore_tag__nYBaQ">一室</span
              ><span class="FilterMore_tag__nYBaQ">二室</span
              ><span class="FilterMore_tag__nYBaQ">三室</span
              ><span class="FilterMore_tag__nYBaQ">四室</span
              ><span class="FilterMore_tag__nYBaQ">四室+</span>
            </dd>
            <dt class="FilterMore_dt__2LHNy">朝向</dt>
            <dd class="FilterMore_dd__3GkeI">
              <span class="FilterMore_tag__nYBaQ">东</span
              ><span class="FilterMore_tag__nYBaQ">西</span
              ><span class="FilterMore_tag__nYBaQ">南</span
              ><span class="FilterMore_tag__nYBaQ">北</span
              ><span class="FilterMore_tag__nYBaQ">东南</span
              ><span class="FilterMore_tag__nYBaQ">东北</span
              ><span class="FilterMore_tag__nYBaQ">西南</span
              ><span class="FilterMore_tag__nYBaQ">西北</span>
            </dd>
            <dt class="FilterMore_dt__2LHNy">楼层</dt>
            <dd class="FilterMore_dd__3GkeI">
              <span class="FilterMore_tag__nYBaQ">高楼层</span
              ><span class="FilterMore_tag__nYBaQ">中楼层</span
              ><span class="FilterMore_tag__nYBaQ">低楼层</span>
            </dd>
            <dt class="FilterMore_dt__2LHNy">房屋亮点</dt>
            <dd class="FilterMore_dd__3GkeI">
              <span class="FilterMore_tag__nYBaQ">集中供暖</span
              ><span class="FilterMore_tag__nYBaQ">双卫生间</span
              ><span class="FilterMore_tag__nYBaQ">近地铁</span
              ><span class="FilterMore_tag__nYBaQ">随时看房</span
              ><span class="FilterMore_tag__nYBaQ">精装</span
              ><span class="FilterMore_tag__nYBaQ">公寓</span
              ><span class="FilterMore_tag__nYBaQ">独立卫生间</span
              ><span class="FilterMore_tag__nYBaQ">押一付一</span
              ><span class="FilterMore_tag__nYBaQ">独立阳台</span
              ><span class="FilterMore_tag__nYBaQ">月租</span
              ><span class="FilterMore_tag__nYBaQ">限女生</span
              ><span class="FilterMore_tag__nYBaQ">限男生</span
              ><span class="FilterMore_tag__nYBaQ">新上</span>
            </dd>
          </dl>
        </div>
        <div
          class="am-flexbox FilterFooter_root__1Tweg FilterMore_footer__1N-vQ am-flexbox-align-center"
        >
          <span class="FilterFooter_btn__2mx57 FilterFooter_cancel__1ZwUx"
            >清除</span
          ><span class="FilterFooter_btn__2mx57 FilterFooter_ok__n6Bt1"
            >确定</span
          >
        </div>
      </van-popup>
    </van-dropdown-menu>
    <HouseItem v-for="item in info" :key="item.houseCode" :item="item">
    </HouseItem>
  </div>
</template>

<script>
import axios from 'axios'
// import { getdetailCity } from '@/api/houseInfo'
export default {
  name: 'find-page',
  data () {
    return {
      info: null,
      value: '',
      active: '',
      show: false,
      everyList: {},
      columns1: [
        // 第一列
        {
          values: ['区域', '地铁'],
          defaultIndex: 2
        },
        // 第二列
        {
          values: ['上午', '下午', '晚上'],
          defaultIndex: 1
        }
      ],
      columns2: ['不限', '整租', '合租'],
      columns3: [
        '不限',
        '1000及以下',
        '1000-2000',
        '2000-3000',
        '3000-4000',
        '4000-5000',
        '5000-6000',
        '6000-7000',
        '7000以上'
      ]
    }
  },

  async created () {
    const { data } = await axios({
      url: 'http://liufusong.top:8080/houses?cityId=AREA%7Cdbf46d32-7e76-1196&stat=1&end=10'
    })
    console.log(data.body.list)
    this.info = data.body.list
  },
  methods: {
    onSearch () {
      console.log(1)
    },
    showPopup () {
      this.show = true
    }
  }
}
</script>
<style lang="less" scoped>
.article-page {
  background: #f5f5f5;

  van-search {
    position: fixed;
    top: 0;
  }
}
.FilterMore_tags__10C1X {
  position: fixed;
  top: 0;
  left: 80px;
  right: 0;
  bottom: 0;
  overflow: auto;
  padding-bottom: 50px;
  z-index: 3;
  background-color: #fff;
}
dl {
  display: block;
  margin-block-start: 1em;
  margin-block-end: 1em;
  margin-inline-start: 0px;
  margin-inline-end: 0px;
  dt {
    display: block;
    dd {
      display: block;
      margin-inline-start: 40px;
    }
  }

  .FilterMore_tag__nYBaQ {
    display: inline-block;
    height: 32px;
    width: 70px;
    margin: 0 18px 15px 0;
    border: 1px solid #ddd;
    border-radius: 3px;
    line-height: 32px;
    text-align: center;
    font-size: 12px;
    color: #888;
  }
}
.am-flexbox {
  text-align: left;
  overflow: hidden;
  display: flex;
  align-items: center;
}
.FilterFooter_cancel__1ZwUx {
  flex: 1 1;
  border-radius: 0;
  color: #21b97a;
}
.FilterFooter_btn__2mx57 {
  display: inline-block;
  height: 50px;
  line-height: 50px;
  text-align: center;
  font-size: 18px;
}
</style>
